<template>
  <div class="app-container">

    <div class="app-container__section">
      <PlusSearch
        v-bind="searchBinds"
        :columns="columns"
        v-model="gSearchForm"
      />
    </div>

    <div class="app-container__section">
      <PlusTable
        v-bind="tableBinds"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
          <el-button type="danger" plain icon="Delete" :disabled="gSelection.length === 0" @click="handleDelete(gSelection)" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
          <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
          <el-button type="primary" plain icon="Unlock" :disabled="gSelection.length !== 1" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">解锁</el-button>
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">导出</el-button>
          <ClockTimer :task="gGetList"/>
          <SearchAreaControl v-model="gShowSearchForm"/>
        </template>
        <template  #plus-cell-status="scope">
          <dict-tag :options="dictData.sys_common_status" :value="scope.row.status" />
        </template>

      </PlusTable>
    </div>

  </div>
</template>

<script setup >
import { PlusSearch, PlusTable } from 'plus-pro-components'
import { useColumnsDict, useCommonConfig } from './hook.js'
import { useListHook,useDelHook  } from '@/hooks/crud/index.js'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import { formatRangeTime } from '@/utils/index.js'
import { cleanLogininfor, unlockLogininfor } from '@/api/monitor/logininfor.js'
defineOptions({
  name:'Logininfor'
})
const { proxy,apiFn,primaryKey,moduleName,beforeDelFn } = useCommonConfig()
const { dictData, columns, } = useColumnsDict()


// ====================列表逻辑=========================
const gSearchForm = ref({  })
const { gGetList, gAllExposeOption } = useListHook({
  listApiFn:apiFn.listApiFn,
  gSearchForm,
  beforeRequest: (reqData) => {
    let { loginTime, ...rest } = reqData;
    let timeRange = formatRangeTime(loginTime,undefined,'YYYY-MM-DD')
    return {
      ...rest,
      params:timeRange
    }
  },
  afterRequest: (resData) => {
    return resData
  }
})
// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption,primaryKey}))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption } ))


// ==================删除逻辑===========================
const { gDelete } = useDelHook({
  delApiFn:apiFn.delApiFn,
  moduleName,
  beforeDelFn: (reqData) => beforeDelFn(reqData) ,
  afterDelFn: (resData) => {
    gGetList()
  }
})
const handleDelete = (data)=>{
  gDelete(data)
}

const defaultSort = ref({ prop: 'loginTime', order: 'descending' })

/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  gSearchForm.value.orderByColumn = column.prop
  gSearchForm.value.isAsc = column.order
  gGetList()
}
/** 清空按钮操作 */
function handleClean() {
  proxy.$modal
    .confirm('是否确认清空所有登录日志数据项?')
    .then(function () {
      return cleanLogininfor()
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('清空成功')
    })
    .catch(() => {})
}
/** 解锁按钮操作 */
function handleUnlock() {
  if(gSelection.value.length === 0) return;
  const { userName } = gSelection.value[0]
  proxy.$modal
    .confirm('是否确认解锁用户"' + userName + '"数据项?')
    .then(function () {
      return unlockLogininfor(userName)
    })
    .then(() => {
      proxy.$modal.msgSuccess('用户' + userName + '解锁成功')
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'monitor/logininfor/export',
    {
      ...gSearchForm.value
    },
    `logininfor_${new Date().getTime()}.xlsx`
  )
}

</script>
